<template>
  <div class="on">
    <section class="msite">
      <!-- 头部组件 -->
      <HeaderTop :title="address.name">
        <router-link slot="left" to="/search" class="header_search">
          <i class="iconfont icon-sousuo"></i>
        </router-link>

        <router-link slot="right" :to="userInfo._id ?'/userinfo':'/login'" class="header_login" >
          <span class="header_login_text" v-if="userInfo._id"><i class="iconfont icon-person"></i></span>
          <span class="header_login_text" v-else >登录|注册</span>

        </router-link>
      </HeaderTop>
      <!--首页导航-->
      <MsiteNav></MsiteNav>
      <!--首页附近商家-->
      <ShopList></ShopList>
    </section>
  </div>
</template>

<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop";
import ShopList from "../../components/ShopList/ShopList";
import MsiteNav from "../../components/MsiteNav/MsiteNav";

import {mapState } from 'vuex'


export default {
  props: {},
  data() {
    return {
      // mytitle: "昌平区北七家宏福科技园(337省道北)"
    };
  },
  computed: {
    ...mapState(['address','categorys','shops','userInfo'])
  },
  created() {},
  mounted() {
      this.$store.dispatch('getAddress')
      this.$store.dispatch('getCategorys')
      this.$store.dispatch('getShops')
  },
  watch: {},
  methods: {},
  components: {
    HeaderTop,
    ShopList,
    MsiteNav
  }
};
</script>

<style scoped lang="stylus" >
@import '../../common/stylus/mixins';

 &.msite  //首页
          width 100%
         
         
</style>
